<template>
    <div v-show="message">
        <div class="content-top">
            <div class="top-a">
                <p class="top-p1">{{$t("common.zongzichan")}}<img src="../assets/images/zc1.png" alt="" @click="change"></p>
                <!-- <p class="top-p1"><img src="../assets/images/zc2.png" alt=""></p> -->
            </div>
            <div class="top-b">
                <p class="top-p2">{{getIsEncryption ? '*****' :($formatMoney(message.totalAssets,2)  || 0)}}</p>
                <span>USDT</span>
            </div>
        </div>
        <div class="content-center">
            <div class="center-a" @click="fn1">{{$t("common.chongzhi")}}</div>
            <div class="xian"></div>
            <div class="center-b" @click="fn2">{{$t("common.tixian")}}</div>
            <div class="xian"></div>
            <div class="center-c" @click="fn3">{{$t("common.huazhuan")}}</div>
        </div>
        <div class="content-bottom">
            <div class="bottom-a">
                <div class="bottom-left">
                    <img src="../assets/images/zc3.png" alt="" class="img-a">
                    <p class="bottom-p1">{{$t("common.zijinzhanghu")}}</p>
                </div>
                <div class="bottom-right">
                    <p class="bottom-p2">{{getIsEncryption ? '*****' :($formatMoney(message.capitalAccount,2) || 0)}}</p>
                    <span class="span">USDT</span>
                </div>
            </div>
            <div class="bottom-a">
                <div class="bottom-left">
                    <img src="../assets/images/zc4.png" alt="" class="img-b">
                    <p class="bottom-p3">{{$t("common.heyuezhanghu")}}</p>
                </div>
                <div class="bottom-right">
                    <p class="bottom-p2">{{getIsEncryption ? '*****' :($formatMoney(message.contractAccount,2) || 0)}}</p>
                    <span class="span">USDT</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
    data(){
        return {
            hideMessage: false
        }
    },
    props: {
      message: {
        type: Object
      },
      encryptionChange: {
        type: Function,
        default: null
      }
    },
  computed: {
    ...mapGetters(["getIsEncryption"]),
  },
    methods:{
        fn1(){
            this.$router.push('/recharge');
        },
        fn2(){
            this.$router.push('/withdrawal');
        },
        fn3(){
            localStorage.setItem("zh",1);
            this.$router.push('/transfer');
        },
        goHistory(){
            this.$router.push('/history');
        },
      change(){
        this.$store.commit('changeIsEncryption')
      },
    }
}
</script>

<style scoped lang="scss">
.content-top{
    height: 35vw;
    width: 100vw;
    background-color: #090A1B;;
    .top-a{
        height: 17vw;
        display: flex;
        justify-content: space-between;
        font-size: 3.7vw;
        margin: 0 3.4vw;
        color: rgba(135, 139, 151, 100);
        background-color: #090A1B;
        .top-p1{
            margin-top: 6.4vw;
            img{
                margin-left: 1.06vw;
                position: relative;
                top: 0.5vw;
                width: 3.73vw;
                height: 3.73vw;
            }
        }
    }
    .top-b{
        height: 18vw;
        background-color: #090A1B;
        display: flex;
        font-weight: 600;
    }
    .top-p2{
        font-size: 6.6vw;
        margin-left: 3.4vw;
        color: rgba(214, 214, 214, 100);
        margin-top: 3vw;
    }
    span{
        height: 5vw;
        font-size: 3.7vw;
        position: relative;
        padding-top: 5.6vw;
        left: 2.1vw;
        color: rgba(214, 214, 214, 100);
    }        
}
.content-center{
    width: 100vw;
    background-color: rgb(32 34 51);
    border-radius: 0px 0px 1.3vw 1.3vw;
    display: flex;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    font-size: 3.7vw;
    color: rgba(214, 214, 214, 100);
    div{
        height: 10.13vw;
        line-height: 10.13vw;
    }
    .center-a{
        width: 33.3vw;
        // border-right: 0.26vw solid rgba(79, 82, 93, 100);
    }
    .center-b{
        width: 33.3vw;
        // border-right: 0.26vw solid rgba(79, 82, 93, 100);
    }
    .center-c{
        width: 33.3vw; 
    }
    .xian{
        width: .26vw;
        height: 4vw;
        background-color: rgba(79, 82, 93, 100);
    }
}
.content-bottom{
    margin-top: 1.6vw;
    background-color: #090A1B;
    height: 142vw;
    .bottom-a{
        height: 12vw;
        background-color: #090A1B;
        display: flex;
        justify-content: space-between;
        .bottom-left{
            display: flex;
            margin-left: 3.46vw;
            .img-a{
                height: 5.4vw;
                width: 5.4vw;
                position: relative;
                top: 3vw;
            }
            .img-b{
                position: relative;
                top: 3.8vw;
                left: 0.5vw;
                height: 3.8vw;
                width: 3.8vw;
            }
            .bottom-p1{
                height: 5.3vw;
                font-size: 3.7vw;
                position: relative;
                top: 3.8vw;
                left: 1.33vw;
                color: rgba(135, 139, 151, 100);
            }
            .bottom-p3{
                height: 5.3vw;
                font-size: 3.7vw;
                position: relative;
                top: 3.8vw;
                left: 2.13vw;
                color: rgba(135, 139, 151, 100);
            }
        }
        .bottom-right{
            display: flex;
            margin-right: 3.46vw;
            font-weight: 600;
            .bottom-p2{
                height: 5.33vw;
                position: relative;
                top: 3.8vw;
                right: 1vw;
                font-size: 3.7vw;
                color: rgba(214, 214, 214, 100);
            }
            .span{
                height: 5.33vw;
                position: relative;
                top: 3.8vw;
                font-size: 3.7vw;
                color: rgba(214, 214, 214, 100);  
            }
        }
        // .bottom-p3{
        //     height: 5.3vw;
        //     font-size: 3.7vw;
        //     position: relative;
        //     top: 3.8vw;
        //     color: rgba(135, 139, 151, 100);
        // }
        // .bottom-p4{
        //     height: 5.33vw;
        //     position: relative;
        //     top: 3.8vw;
        //     font-size: 3.7vw;
        //     color: rgba(214, 214, 214, 100);
        //     font-family: PingFangSC-regular;
        //     .span2{
        //         position: relative;
        //     }
        // }  
    }    
}
</style>
